<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style>
        body{
            background: rgb(26,188,156);
        }
        .pople{
            position: absolute;
            top: 40px;
            left: 586px;
        }
        #login_box{
            margin:-166px auto;
        }
        .loginRoot {
            border-radius: 10px;
            position: absolute;
            top: 141px;
            left: 443px;
            width: 295px;
            padding: 91px 43px;
            background: aliceblue;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #c6c6c6;
        }
        .loginTitle {
            color: #1ABC9C;
            position: absolute;
            top: 0px;
            left: 46px;
        }
        p{
            color:  rgb(26,188,156);
            position: absolute;
            top: 38px;
            left: 70px
        }
        .tubiao1{
            position: absolute;
            top: 68px;
            left: 9px;
        }
        .tubiao2{
            position: absolute;
            top: 68px;
            left: 870px;
        }
        #loginImg{
            height: 40px;
            width: 77px;
            position: absolute;
            top: 229px;
            left: 260px;
        }
        .zh{
            margin:10px 0px 24px 16px;
        }
        .mm{
            margin:10px 0px 27px 16px;
        }
        .cd{
            margin:10px 0px 24px 16px;
        }
        button{
            margin:-11px 0px -14px 35px;
            background-color: #1ABC9C;
        }
    </style>
</head>
<body>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue，  后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="login_box" >
    <div class="pople">
        <img src="./img/1.png" width="100px"/>
    </div>
    <div class="tubiao1">
        <img src="./img/2.png" width="400px">
    </div>
    <div class="tubiao2">
        <img src="./img/2.png" width="400px">
    </div>
    <form class="loginRoot" action="javascript:;">
        <h2 class="loginTitle">思云课堂后台业务管理系统</h2>
        <p>Business Manaaement Svstem</p>
        <div class="zh">
            账号:
            <input type="text" style="height: 33px;width: 225px" placeholder="请输入用户名" v-model="account">
        </div>
        <div class="mm">
            密码:
            <input type="password" style="height: 33px;width: 225px" placeholder="请输入密码" v-model="password">
        </div>
        <div class="cd">
            验证码:
            <input type="code" style="height: 33px;width: 133px" placeholder="请输入验证码" v-model="code">
            <img id="loginImg" src="http://localhost:8081/user/captcha" @click="changImage"/>
        </div>
        <button style="height: 41px;width: 225px" @click="dlu">登录</button>
    </form>
</div>

<script>
    new Vue({
        el:'#login_box',
        data:{
            account:"",
            password:"",
            code:""
        },
        methods:{
            dlu(){
                var param =  new URLSearchParams();
                console.log("账号:" + this.account)
                console.log("密码:" + this.password)
                console.log("验证码:"+this.code)

                param.append('account',this.account)
                param.append('password',this.password)
                param.append("code",this.code)
                axios({
                    method:'post',
                    url:'http://localhost:8081/user/toLogin',
                    data:param
                }).then((res)=>{
                    if(res.data.state == 200){
                       this.$message({
                            message:"登录成功",
                            type:'success',
                            duration:2000,
                            onClose:function(){
                                window.location.href="index.html";
                            }
                        });
                    }else if(res.data.state == 300){
                        this.$message({
                            showClose:true,
                            duration:1000,
                            message:"该用户名不存在",
                            type:'warning',
                        })
                    }else if(res.data.state == 400) {
                        this.$message({
                            showClose: true,
                            duration: 1000,
                            message: "密码错误",
                            type: 'warning',
                        })
                    }else if(res.data.state == 405){
                        this.$message({
                            showClose: true,
                            duration: 1000,
                            message: "验证码错误",
                            type: 'warning',
                        })
                    }
                })
            },
            changImage(){
                var $img =document.getElementById("loginImg");
                $img.setAttribute("src","http://localhost:8081/user/captcha");
            }
        }
    })
</script>
</body>
</html>